<!-- src/components/IndexPage.vue -->
<template>
  <div class="admin-layout">
    <!-- 顶部导航栏 -->
    <header class="top-bar">
      <div class="logo-section">
        <img class="logo-image" src="../assets/HomeLogo.png" alt="系统Logo">
        <h1 class="system-title">慧医数字医疗系统</h1>
      </div>
      
      <div class="user-section">
        <div class="welcome-text">欢迎你，{{ uname }}</div>
        <el-button 
          type="danger" 
          size="small" 
          @click="logout"
          icon="el-icon-switch-button"
          class="logout-btn"
        >
          退出登录
        </el-button>
      </div>
    </header>
    
    <!-- 主体内容 -->
    <div class="main-container">
      <!-- 侧边菜单 -->
      <aside class="sidebar">
        <nav class="menu-nav">
          <ul class="menu-list">
            <li 
              v-for="item in permission" 
              :key="item.id" 
              class="menu-item"
              @click="toPage(item.path)"
            >
              <i class="menu-icon" :class="getMenuIcon(item.title)"></i>
              <span class="menu-text">{{ item.title }}</span>
            </li>
          </ul>
        </nav>
      </aside>
      
      <!-- 内容区域 -->
      <main class="content-area">
        <div class="content-wrapper">
          <router-view></router-view>
        </div>
      </main>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: "IndexPage",
  data() {
    return {
      uname: "",
      permission: []
    }
  },
  
  mounted() {
    this.fetchUserInfo()
    this.fetchPermissions()
  },
  
  methods: {
    // 获取用户信息
    async fetchUserInfo() {
      try {
        const response = await axios.get("http://localhost:8080/getUname")
        this.uname = response.data
      } catch (error) {
        console.error("获取用户信息失败:", error)
        this.$message.error("获取用户信息失败")
      }
    },
    
    // 获取权限菜单
    async fetchPermissions() {
      try {
        const response = await axios.get("http://localhost:8080/getAllPermission")
        this.permission = response.data
      } catch (error) {
        console.error("获取权限菜单失败:", error)
        this.$message.error("获取权限菜单失败")
      }
    },
    
    // 页面跳转
    toPage(path) {
      if (path) {
        this.$router.push({ path }).catch(err => {
          if (err.name !== 'NavigationDuplicated') {
            console.error(err)
          }
        })
      }
    },
    
    // 退出登录
    logout() {
      this.$confirm('确定要退出登录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 清除本地存储
        localStorage.removeItem('rememberedUser')
        // 跳转到登录页面
        this.$router.push('/loginpage')
        this.$message.success('已退出登录')
      }).catch(() => {
        this.$message.info('已取消退出')
      })
    },
    
    // 根据菜单名称返回对应图标
    getMenuIcon(title) {
      const iconMap = {
        '仪表盘': 'el-icon-menu',
        '用户管理': 'el-icon-user',
        '患者管理': 'el-icon-user-solid',
        '预约管理': 'el-icon-date',
        '报表统计': 'el-icon-document',
        '系统设置': 'el-icon-setting'
      }
      return iconMap[title] || 'el-icon-menu'
    }
  }
}
</script>

<style scoped>
.admin-layout {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
}

/* 顶部导航栏 */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
  background: linear-gradient(90deg, #2c3e50, #3498db);
  padding: 0 30px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.logo-section {
  display: flex;
  align-items: center;
  gap: 15px;
}

.logo-image {
  height: 50px;
  width: auto;
}

.system-title {
  color: white;
  font-size: 22px;
  font-weight: 600;
  margin: 0;
}

.user-section {
  display: flex;
  align-items: center;
  gap: 20px;
}

.welcome-text {
  color: white;
  font-size: 16px;
  font-weight: 500;
}

.logout-btn {
  background-color: #e74c3c;
  border-color: #e74c3c;
  transition: all 0.3s;
}

.logout-btn:hover {
  background-color: #c0392b;
  border-color: #c0392b;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
}

/* 主体容器 */
.main-container {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* 侧边栏 */
.sidebar {
  width: 220px;
  background: linear-gradient(180deg, #2c3e50, #34495e);
  color: white;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
  z-index: 90;
}

.menu-nav {
  height: 100%;
  overflow-y: auto;
}

.menu-list {
  list-style: none;
  padding: 20px 0;
  margin: 0;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 15px 25px;
  cursor: pointer;
  transition: all 0.3s;
  border-left: 4px solid transparent;
}

.menu-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-left-color: #3498db;
  transform: translateX(5px);
}

.menu-icon {
  margin-right: 12px;
  font-size: 18px;
  width: 20px;
  text-align: center;
}

.menu-text {
  font-size: 15px;
  font-weight: 500;
}

/* 内容区域 */
.content-area {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.content-wrapper {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  background-color: #f5f7fa;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .top-bar {
    padding: 0 15px;
    height: 60px;
  }
  
  .system-title {
    font-size: 18px;
  }
  
  .welcome-text {
    font-size: 14px;
  }
  
  .sidebar {
    width: 60px;
  }
  
  .menu-text {
    display: none;
  }
  
  .menu-item {
    justify-content: center;
    padding: 15px;
  }
  
  .menu-icon {
    margin-right: 0;
    font-size: 20px;
  }
  
  .content-wrapper {
    padding: 15px;
  }
}

@media (max-width: 480px) {
  .user-section {
    gap: 10px;
  }
  
  .logout-btn span {
    display: none;
  }
  
  .logout-btn .el-icon-switch-button {
    margin-right: 0;
  }
}
</style>